<!--:
	var editUrl = "updUser('system/ucenter/user/updUser', 'form-user')";
-->
<div class="page-header">
	<ul id="table-tab" class="nav nav-tabs" role="tablist">
		<li role="presentation" class=""><a href="#user-tab"
			aria-controls="user-tab" role="tab" data-toggle="tab">个人资料</a></li>
	</ul>
</div>
<div class="tab-content">
	<form id="form-user" class="tab-pane active" role="tabpanel">
		<div class="row">
			<div class="col-md-2">
				<span class="profile-picture">
					<img id="user-pic" name="user.pic" class="editable img-responsive" alt="Alex's Avatar" src="${user.pic}" />
				</span>
			</div>
			
			<div class="col-md-10">
				<div class="profile-user-info profile-user-info-striped">
					<input type="hidden" id="user-uuid" name="user.uuid" value="${user.uuid}">
					<div class="profile-info-row">
						<div class="profile-info-name">用户姓名</div>
						<div class="profile-info-value">
							<input type="text" class="form-control input-sm" id="user-realname" name="user.realname" value="${user.realname}" placeholder="用户姓名">
						</div>
					</div>

					<div class="profile-info-row">
						<div class="profile-info-name">昵称</div>
						<div class="profile-info-value">
							<input type="text" class="form-control input-sm" id="user-nickname" name="user.nickname" value="${user.nickname}" placeholder="昵称">
						</div>
					</div>
					
					<div class="profile-info-row">
						<div class="profile-info-name">性别</div>
						<div class="profile-info-value">
                            <x:select models="${dictSel('CM-SEX')}"
                            	defaultOption="请选择"
								field="value,name" value="${user.sex}"
								id="user-sex" name="user.sex"
								class="chosen-select form-control" >
							</x:select>
                        </div>
					</div>

					<div class="profile-info-row">
						<div class="profile-info-name">身份证</div>
						<div class="profile-info-value">
							<input type="text" class="form-control input-sm" id="user-idcard" name="user.idcard" value="${user.idcard}" placeholder="身份证">
						</div>
					</div>

					<div class="profile-info-row">
						<div class="profile-info-name">联系电话</div>
						<div class="profile-info-value">
							<input type="text" class="form-control input-sm" id="user-telphone" name="user.telphone" value="${user.telphone}" placeholder="联系电话">
						</div>
					</div>

					<div class="profile-info-row">
						<div class="profile-info-name">地址</div>
						<div class="profile-info-value">
							<input type="text" class="form-control input-sm" id="user-address" name="user.address" value="${user.address}" placeholder="地址">
						</div>
					</div>

					<div class="profile-info-row">
						<div class="profile-info-name">个人简介</div>
						<div class="profile-info-value">
							<input type="text" class="form-control input-sm" id="user-intro" name="user.intro" value="${user.intro}" placeholder="个人简介">
						</div>
					</div>
				</div>
				<div class="profile-user-info" style="margin-top: 1em;">
					<button type="button" class="btn btn-default " id="savebtn" onclick="updUser('system/ucenter/updUser', 'form-user')">保存</button>
				</div>

			</div>
		</div>
	</form>
</div>
<script type="text/javascript">
<!--//-->


//*** editable avatar *** //
try {//ie8 throws some harmless exceptions, so let's catch'em

	//first let's add a fake appendChild method for Image element for browsers that have a problem with this
	//because editable plugin calls appendChild, and it causes errors on IE at unpredicted points
	try {
		document.createElement('IMG').appendChild(document.createElement('B'));
	} catch(e) {
		Image.prototype.appendChild = function(el){}
	}

	var last_gritter
	$('#user-pic').editable({
		type: 'image',
		name: 'user-pic',
		value: null,
		image: {
			//specify ace file input plugin's options here
			btn_choose: 'Change Avatar',
			droppable: true,
			maxSize: 110000,//~100Kb

			//and a few extra ones here
			name: 'user-pic',//put the field name here as well, will be used inside the custom plugin
			on_error : function(error_type) {//on_error function will be called when the selected file has a problem
				if(last_gritter) $.gritter.remove(last_gritter);
				if(error_type == 1) {//file format error
					last_gritter = $.gritter.add({
						title: 'File is not an image!',
						text: 'Please choose a jpg|gif|png image!',
						class_name: 'gritter-error gritter-center'
					});
				} else if(error_type == 2) {//file size rror
					last_gritter = $.gritter.add({
						title: 'File too big!',
						text: 'Image size should not exceed 100Kb!',
						class_name: 'gritter-error gritter-center'
					});
				}
				else {//other error
				}
			},
			on_success : function() {
				$.gritter.removeAll();
			}
		},
	    url: function(params) {
			// ***UPDATE AVATAR HERE*** //
			//for a working upload example you can replace the contents of this function with 
			//examples/profile-avatar-update.js

			var deferred = new $.Deferred

			var value = $('#user-pic').next().find('input[type=hidden]:eq(0)').val();
			if(!value || value.length == 0) {
				deferred.resolve();
				return deferred.promise();
			}


			//dummy upload
			setTimeout(function(){
				if("FileReader" in window) {
					//for browsers that have a thumbnail of selected image
					var thumb = $('#user-pic').next().find('img').data('thumb');
					if(thumb) $('#user-pic').get(0).src = thumb;
				}
				
				deferred.resolve({'status':'OK'});

				if(last_gritter) $.gritter.remove(last_gritter);
				last_gritter = $.gritter.add({
					title: 'Avatar Updated!',
					text: 'Uploading to server can be easily implemented. A working example is included with the template.',
					class_name: 'gritter-info gritter-center'
				});
				
			 } , parseInt(Math.random() * 800 + 800))

			return deferred.promise();
			
			// ***END OF UPDATE AVATAR HERE*** //
		},
		
		success: function(response, newValue) {
		}
	})
}catch(e) {}
</script>

